<template>
	<div class="oe-carte-management" style="margin-top: 20px;" v-loading="loading">
		<topTip :title="title" :roleId="roleId"></topTip>
		<div class="carte-management-list clearfix">
			<div class="carte-three fl">
				<a-tree :showLine="true" :treeData="treeData" :loadData="onLoadData" @select="onSelect" :defaultSelectedKeys="[ztreeId]"></a-tree>
			</div>
			<div class="carte-list-table fr">
				<div class="oe-list-search">
					<span class="oe-list-text">菜单名称：</span>
					<span class="oe-list-input">
						<a-input placeholder="输入菜单名称" v-model="menuKey" class="oe-list-input-text" />
					</span>
					<span class="oe-list-text">操作名称：</span>
					<span class="oe-list-input">
						<a-input placeholder="输入操作名称" v-model="operationKey" class="oe-list-input-text" />
					</span>
					<span class="oe-list-btns">
						<a-button type="primary" @click.stop="getOperation">查询</a-button>
					</span>
					<span class="oe-list-btns all">
						<a-checkbox v-model="all" v-if="operationList.includes('add/edit/del:menu')" @change="AllOperation(1)">全选可管理({{opIds.length}}条)</a-checkbox>
						<a-checkbox v-model="allLook" v-if="operationList.includes('add/edit/del:menu')" @change="AllOperation(2)">全选仅查看({{opIds.length}}条)</a-checkbox>
						<a-checkbox v-model="noAll" v-if="operationList.includes('add/edit/del:menu')" @change="AllOperation(0)">取消({{opIds.length}}条)</a-checkbox>
					</span>
					<span class="oe-list-btns all">
						<a-button type="primary" @click.stop="saveAll" v-show="isShow">保存</a-button>
					</span>
				</div>
				<a-table :columns="columns" :dataSource="data" :pagination="pagination" class="oe-list-table">
					<template slot="operation" slot-scope="text, record">
						<span>
							<!-- <a-checkbox-group :options="plainOptions" v-model="record.operation" @change="onOperation(record)" /> -->
							<a-checkbox v-model="record.IsWrite" :disabled="!operationList.includes('add/edit/del:menu')" @change="onOperation(record,1)">可管理</a-checkbox>
							<a-checkbox v-model="record.IsRead" :disabled="!operationList.includes('add/edit/del:menu')" @change="onOperation(record,0)">仅查看</a-checkbox>
						</span>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
	components: {
		topTip,
	},
	mixins: [GetOperationList],
	props: {
		roleId: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			title: [{ text: '角色管理' }, { text: '菜单管理' }],
			name: '',
			all: false,
			noAll: false,
			allLook: false,
			isShow: false,
			pagination: {
				pageSizeOptions: ['10', '20', '50', '100', '1000'],
				showQuickJumper: true,
				showSizeChanger: true,
				showTotal(total) {
					return `共 ${total} 条`;
				},
				onShowSizeChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.getOperation();
				},
				onChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.getOperation();
				},
				buildOptionText(props) {
					return props.value + '条/页';
				},
				current: 1,
				pageSize: 10,
			},
			data: [],
			columns: [
				{ title: '序号', dataIndex: 'key', align: 'center' },
				{ title: '菜单名称 ', dataIndex: 'MenuName', align: 'center' },
				{ title: '操作名称 ', dataIndex: 'Name', align: 'center' },
				// { title: '所属路径', dataIndex: 'PageUrl' },
				{
					title: '操作',
					dataIndex: 'operation',
					width: '200px',
					scopedSlots: { customRender: 'operation' },
					align: 'center',
				},
			],
			operationKey: '',
			menuKey: '',
			loading: false,
			treeData: [],
			plainOptions: ['只读', '读写'],
			ztreeId: '',
			childList: [],
			cahceZtreeId: '',
			opIds: [],
			operationList: [],
			// 、操作list
			IsOpList: [],
		};
	},
	computed: {},
	mounted() {
		this.getOpeartion();
		this.getZtree();
	},
	methods: {
		// 获取页面操作
		getOpeartion() {
			this.loading = true;
			this.GetOperationList()
				.then((rst) => {
					this.loading = false;
					this.operationList = [];
					this.IsOpList = [];
					if (rst.code === 1) {
						if (rst.list.length) {
							rst.list.forEach((item) => {
								if (item.IsWrite) {
									this.operationList.push(item.Name);
								}
							});
							this.IsOpList = rst.list;
						}
					} else {
						this.$message.error(rst.msg);
					}
				})
				.catch((err) => {
					this.loading = false;
				});
		},
		// 判断是否是只读
		getIsWrite(type) {
			type = 'add/edit/del:menu';
			let index = this.IsOpList.findIndex((el) => {
				return el.Name === type;
			});
			if (index > -1) {
				if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
					this.$message.info('您没有该操作权限！');
					return false;
				} else {
					return true;
				}
			}
		},
		onSelect(selectedKeys, info) {
			console.log('selectedKeys', selectedKeys);
			console.log('info', info);
			this.pagination.current = 1;
			this.pagination.pageSize = 10;
			if (selectedKeys.length) {
				this.cahceZtreeId = selectedKeys[0];
			}
			this.ztreeId = this.cahceZtreeId;
			this.getOperation();
		},
		onOperation(data, type) {
			if (type == 1) {
				if (data.IsWrite) {
					data.IsRead = false;
				}
			} else {
				if (data.IsRead) {
					data.IsWrite = false;
				}
			}
			this.getSave(data);
		},
		AllOperation(type) {
			if (type == 1) {
				this.noAll = false;
				this.allLook = false;
			} else if (type == 2) {
				this.noAll = false;
				this.all = false;
			} else {
				this.all = false;
				this.allLook = false;
			}
			if (this.noAll || this.all || this.allLook) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		getSave(data) {
			this.loading = true;
			this.$http
				.post('/api/SchoolManager/rolemenu/save', {
					roleId: this.roleId, //角色Id
					// menuId: this.ztreeId, //菜单Id
					operationId: data.Id, //操作Id
					isRead: data.IsRead, //是否只读
					isWrite: data.IsWrite, //是否读写
				})
				.then((res) => {
					this.loading = false;
					if (res.code > 0) {
						this.$message.success(res.msg);
						this.getOperation();
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		saveAll() {
			this.loading = true;
			this.$http
				.post('/api/SchoolManager/rolemenu/saveAll', {
					roleId: this.roleId, //角色Id
					operationIds: this.opIds, //操作Id
					isOp: this.all || this.allLook ? true : false, //是否只读,
					isLook: this.allLook ? true : false,
				})
				.then((res) => {
					this.loading = false;
					if (res.code > 0) {
						this.$message.success(res.msg);
						this.getOperation();
						this.noAll = false;
						this.all = false;
						this.allLook = false;
						this.isShow = false;
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		getZtree() {
			this.loading = true;
			this.$http
				.post('/api/SchoolManager/rolemenu/ztree')
				.then((res) => {
					this.treeData = this.getZtreeData(res);
					this.ztreeId = res[0].id;
					this.getOperation();
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
					this.getZtree();
				});
		},
		// 重新构造树状图结构
		getZtreeData(data) {
			var ztreeData = [];
			for (let i = 0; i < data.length; i++) {
				let lis = {
					key: data[i].id,
					title: data[i].name,
					isParent: data[i].isParent,
				};
				ztreeData.push(lis);
			}
			return ztreeData;
		},
		// 树状图异步加载
		onLoadData(treeNode) {
			// console.log(treeNode);
			if (treeNode.dataRef.isParent) {
				return this.getZtreeTwo(treeNode.dataRef.key).then((res) => {
					if (treeNode.dataRef.children) {
						return;
					}
					treeNode.dataRef.children = res;
					this.treeData = [...this.treeData];
					return res;
				});
			} else {
				return Promise.resolve();
			}
		},
		getZtreeTwo(Id) {
			this.childList = [];
			return this.$http
				.post('/api/SchoolManager/rolemenu/ztree', {
					Id: Id,
				})
				.then(this.getZtreeData)
				.catch((err) => {
					this.loading = false;
					this.$message.error('接口出错，请稍后重试');

          // this.getZtree()
				});
		},
		getOperation() {
			this.loading = true;
			this.opIds = [];
			this.$http
				.post('/api/SchoolManager/rolemenu/getOperation', {
					menuKey: this.menuKey,
					operationKey: this.operationKey,
					menuId: this.ztreeId, //菜单id
					roleId: this.roleId, //角色Id
					pageSize: this.pagination.pageSize,
					page: this.pagination.current,
				})
				.then((res) => {
					this.loading = false;
					if (res.code > 0) {
						this.data = res.list;
						for (let i = 0; i < res.list.length; i++) {
							this.data[i].key = i + 1;
							this.opIds.push(this.data[i].Id);
						}
					} else {
						this.$message.error(res.msg);
					}
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
					this.getOperation();
				});
		},
	},
};
</script>
